<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>显示所有床位信息</title>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.css" type="text/css">
    <script src="webjars/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<h2>床位管理列表&emsp;&emsp;<button type="button" onclick="history.go(-1)"
                              class="glyphicon glyphicon-share-alt" aria-hidden="true" th:bgcolor="grey"></button></h2>
<table>
    <form action="/searchB">
        <tr>
            <td>查询条件：&emsp;</td>
            <td><input name="name" type="text" placeholder="请输入床位人员姓名"></td>
            <td>&emsp;<input type="submit" value="查询"></td>
            <td>&emsp;&emsp;&emsp;&emsp;&emsp;<a th:href="@{'/addBed'}" class="btn btn-info">
                    <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>增加</a>
            </td>
        </tr>
    </form>
</table><br>
<table class="table table-hover">
    <tr>
        <th>序号</th>
        <th>档案编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>床位使用起始日期</th>
        <th>床位使用结束日期</th>
        <th>床位详细信息</th>
        <th>其它操作</th>
    </tr>
    <tr th:each="bed:${beds}">
        <td th:text="${bed.id}"></td>
        <td th:text="${bed.fnumber}"></td>
        <td th:text="${bed.name}"></td>
        <td th:text="${bed.sex}"></td>
        <td th:text="${bed.stusetime}"></td>
        <td th:text="${bed.enusetime}"></td>
        <td th:text="${bed.bedtails}"></td>
        <td>
            <a th:href="@{'/bedstaff/'+${bed.id}}" class="btn btn-info">修改</a>
            <a th:onclick="|deleteBed(this, ${bed.id})|" class="btn btn-warning">删除</a>
        </td>
    </tr>
</table>
<script>
    function deleteBed(obj,id) {
        if(confirm("确定要删除么？")){
            alert("要删除的床位编号："+id);
            //发送删除操作请求
            $.ajax({
                url: "/bedstaff/"+id,
                type: "DELETE",
                success: function (result) {
                    // alert(result);
                    if(result==="success"){
                        //删除当前行
                        $(obj ).parent().parent().remove();
                    }else{
                        alert("这个床位不能删除....");
                    }
                }
            });
        }else{
            alert("撤销删除操作")
        }

    }
</script>
</body>
</html>